﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Slide Anh</title>
    <style type="text/css">
       
        #content {
            width: 620px;
            margin: 0px auto;
        }

        #desc {
            margin: 10px;
            float: left;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
    </style>
    <!-- include CSS always before including js -->
    <link type="text/css" rel="stylesheet" href="~/ImgSlide/skins/tn3/tn3.css"></link>
    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <!-- include tn3 plugin -->
    <script type="text/javascript" src="~/ImgSlide/js/jquery.tn3lite.min.js"></script>
    <!--  initialize the TN3 when the DOM is ready -->
    <script type="text/javascript">
        $(document).ready(function () {
            //Thumbnailer.config.shaderOpacity = 1;
            var tn1 = $('.mygallery').tn3({
                skinDir: "skins",
                imageClick: "fullscreen",
                image: {
                    maxZoom: 1.5,
                    crop: true,
                    clickEvent: "dblclick",
                    transitions: [{
                        type: "blinds"
                    }, {
                        type: "grid"
                    }, {
                        type: "grid",
                        duration: 460,
                        easing: "easeInQuad",
                        gridX: 1,
                        gridY: 8,
                        // flat, diagonal, circle, random
                        sort: "random",
                        sortReverse: false,
                        diagonalStart: "bl",
                        // fade, scale
                        method: "scale",
                        partDuration: 360,
                        partEasing: "easeOutSine",
                        partDirection: "left"
                    }]
                }
            });
        });
    </script>
</head>
<body>
    <div id="content">
        <div class="mygallery">
            <div class="tn3 album">
                <h4>Fixed Dimensions</h4>
                <div class="tn3 description">Images with fixed dimensions</div>
                <div class="tn3 thumb">images/35x35/1.jpg</div>
                <ol>
                    <li>
                        <h4>Hohensalzburg Castle</h4>
                        <div class="tn3 description">Salzburg, Austria</div>
                        <a href="~/ImgSlide/images/620x378/1.jpg">
                            <img src="~/ImgSlide/images/35x35/1.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Isolated sandy cove</h4>
                        <div class="tn3 description">Zakynthos island, Greece</div>
                        <a href="~/ImgSlide/images/620x378/2.jpg">
                            <img src="~/ImgSlide/images/35x35/2.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>A view from the Old Town</h4>
                        <div class="tn3 description">Herceg Novi, Montenegro</div>
                        <a href="~/ImgSlide/images/620x378/3.jpg">
                            <img src="~/ImgSlide/images/35x35/3.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Walls of the Old Town</h4>
                        <div class="tn3 description">Kotor, Montenegro</div>
                        <a href="~/ImgSlide/images/620x378/4.jpg">
                            <img src="~/ImgSlide/images/35x35/4.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Boat in the port</h4>
                        <div class="tn3 description">Sousse, Tunis</div>
                        <a href="~/ImgSlide/images/620x378/5.jpg">
                            <img src="~/ImgSlide/images/35x35/5.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Wall of the Jain temple</h4>
                        <div class="tn3 description">Jaisalmer, India</div>
                        <a href="ImgSlide/images/620x378/6.jpg">
                            <img src="ImgSlide/images/35x35/6.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>City park</h4>
                        <div class="tn3 description">Negotin, Serbia</div>
                        <a href="~/ImgSlide/images/620x378/7.jpg">
                            <img src="~/ImgSlide/images/35x35/7.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Taj Mahal mausoleum</h4>
                        <div class="tn3 description">Agra, India</div>
                        <a href="~/ImgSlide/images/620x378/8.jpg">
                            <img src="~/ImgSlide/images/35x35/8.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Zante Port</h4>
                        <div class="tn3 description">Zakynthos, Greece</div>
                        <a href="~/ImgSlide/images/620x378/9.jpg">
                            <img src="~/ImgSlide/images/35x35/9.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Rustovo Monastery</h4>
                        <div class="tn3 description">Budva, Montenegro</div>
                        <a href="~/ImgSlide/images/620x378/10.jpg">
                            <img src="~/ImgSlide/images/35x35/10.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>The Mezquita, Cathedral and former Great Mosque</h4>
                        <div class="tn3 description">Cordoba, Spain</div>
                        <a href="~/ImgSlide/images/620x378/11.jpg">
                            <img src="~/ImgSlide/images/35x35/11.jpg" />
                        </a>
                    </li>
                    <li>
                        <h4>Wine Cellars</h4>
                        <div class="tn3 description">Rajac, Serbia</div>
                        <a href="~/ImgSlide/images/620x378/12.jpg">
                            <img src="~/ImgSlide/images/35x35/12.jpg" />
                        </a>
                    </li>
                </ol>
            </div>
        </div>
       
    </div>
</body>
</html>
